<template>
<div class="wrapper">
    <div class="max-width">
        <div class="headerwaper">
            <h3 class="htitle">TW(Tongwei) Solar Global Partner Recruitment</h3>
        </div>
        <div class="formWaper">
            <div class="formtype">
                <p class="jointitle">{{typeName}}</p>
                <p class="lin"></p>
            </div>
            <div class="formdesc">
                To sign up, please provide the following information
            </div>
            <div class="mianfrom">
                <a-form-model id="components-login" labelAlign="left" ref="ruleForm" layout="horizontal" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16}" :model="form" :form="form" :rules="rules" @submit="handleSubmit">
                    <div v-if="typeName=='Individual'">
                        <a-row type="flex">
                            <a-col :span="12">
                                <a-form-model-item required prop="name"  :label="$t('index.from')[0]" :labelCol="{ span: 4 }" :wrapperCol="{ span: 16}">
                                    <a-input v-model="form.name" :placeholder="$t('index.placeholder')[1]">
                                        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item  prop="email" required :label="$t('index.from2')[3]" labelAlign="right">
                                    <a-input v-model="form.email" :placeholder="$t('index.placeholder')[3]" >
                                        <a-icon slot="prefix" type="mail" style="color: rgba(0,0,0,.25)" />
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex">
                            <a-col :span="12">
                               <a-form-model-item required prop="area" :label="$t('index.from2')[4]"  :labelCol="{ span: 4 }" :wrapperCol="{ span: 16}">
                                    <a-select   v-model="form.area" @change="changeCountry"  :placeholder="$t('index.placeholder')[4]" >
                                        <a-select-option v-for="(item,index) in countrys" :key="index" :value="item.code" >
                                            {{item.enName}}
                                        </a-select-option>

                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item  :label="$t('index.from2')[2]" labelAlign="right">
                                    <a-input-group compact>
                                        <a-input style="width: 20%;padding-right:4px;text-align:right" :value="phonebefore" disabled/>
                                        <a-input v-model="form.phone" style="width: 80%" :placeholder="$t('index.placeholder')[5]" >
                                            <a-icon slot="prefix" type="phone" style="color: rgba(0,0,0,.25)" />
                                        </a-input>
                                    </a-input-group>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </div>
                    <!-- 公司注册 -->
                    <div v-if="typeName=='Company'">
                        <a-row type="flex">
                            <a-col :span="12">
                                <a-form-model-item :label="$t('index.from2')[0]" :labelCol="{ span: 7 }" :wrapperCol="{ span: 15}">
                                    <a-input v-model="form.companyname" :placeholder="$t('index.placeholder')[0]">

                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item required prop="name" :label="$t('index.from2')[1]" labelAlign="right">
                                    <a-input v-model="form.name" :placeholder="$t('index.placeholder')[6]">
                                         <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex">
                            <a-col :span="12">
                                 <a-form-model-item required prop="area" :label="$t('index.from2')[4]"   :labelCol="{ span: 4 }" :wrapperCol="{ span: 18}">
                                    <a-select   show-search @change="changeCountry" v-model="form.area"  :placeholder="$t('index.placeholder')[4]">
                                        <a-select-option v-for="(item,index) in countrys" :key="index" :value="item.code" >
                                            {{item.enName}}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                               <a-form-model-item  prop="email" :label="$t('index.from2')[3]" labelAlign="right" >
                                   <a-input v-model="form.email" :placeholder="$t('index.placeholder')[3]">
                                        <a-icon slot="prefix" type="mail" style="color: rgba(0,0,0,.25)" />
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex">
                            <a-col :span="12">
                                <a-form-model-item  :label="$t('index.from2')[2]" :labelCol="{ span: 4 }" :wrapperCol="{ span: 18}">
                                     <a-input-group compact>
                                        <a-input style="width: 20%;padding-right:8px;text-align:right" :value="phonebefore" disabled/>
                                        <a-input v-model="form.phone" style="width: 80%" :placeholder="$t('index.placeholder')[2]" >
                                            <a-icon slot="prefix" type="phone" style="color: rgba(0,0,0,.25)" />
                                        </a-input>
                                    </a-input-group>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </div>

                    <a-row type="flex">
                        <a-col :span="24">
                            <a-form-model-item required prop="onlytw" :label="$t('index.from2')[5]" labelAlign='left' :labelCol="{ span: 8 }" :wrapperCol="{ span: 16}">
                                <a-select   v-model="form.onlytw" :placeholder="$t('index.placeholder')[7]">
                                        <a-select-option  :value="1" >
                                           Yes
                                        </a-select-option>
                                         <a-select-option  :value="0" >
                                           No
                                        </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row type="flex">
                        <a-col :span="24">
                            <a-form-model-item required prop="resourcedescr"  :label="$t('index.from2')[6]" labelAlign='left' :labelCol="{ span: 24 }" :wrapperCol="{ span: 24}">
                                <a-input v-model="form.resourcedescr" type="textarea" :rows="8" :placeholder="advehder">
                                </a-input>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-form-model-item class="buitem" :wrapperCol="{ span: 24}">
                        <a-button type="primary" html-type="submit" class="joinButton" :loading='loading'>
                            Click to join
                        </a-button>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import countrys from '~/assets/js/country.js'
import {registerApi} from "~/assets/js/api";
export default {
    components: {},
    props: {},
    data() {
        return {
            loading: false,
            typeName: "Individual", //Individual Company
            countrys:countrys,
            phonebefore:'',
            advehder:'(Please ensure that your description is clear as it will greatly enhances your chances of being chosen as an agent. For example: "I am a senior practitioner in the photovoltaic industry. In ** (your country), we have a demand for ** MW Utility-Scale Power Plants, and we are highly interested in establishing a partnership with TW(Tongwei) Solar.")',
            form: {
                name: '',
                email: '',
                location: '',
                companyname: '',
                phone: "",
                // area: '',
                // onlytw:'',
                sex: '',
                resourcedescr:'',
                characteristic:1 //1个人 2公司
            },
            rules: {
            area:[{ required: true, message: 'Please enter your country'}],
            onlytw:[{ required: true, message: 'Please enter Yes or No'}],
            name:[{ required: true, message: 'Please enter your name'}],
            email: [
                { required: true, message: 'Please enter your email'},
                { required: true, message: 'E-malil is required', trigger: 'blur' },
                { required: true,pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,message: '邮箱格式不正确',trigger: 'blur'},
                { min: 3, max: 50, message: 'Length should be 3 to 50', trigger: 'blur' },
            ],
            resourcedescr:[{ required: true, message: 'Please enter your description'}],
          }
        };
    },
    created() {
        console.log(this.$route.query.type, 'router')
        if (this.$route.query.type) {
            this.typeName = this.$route.query.type;
            this.rules.name=[{ required: true, message: this.typeName=='Individual'?'Please enter your name':'Please enter your contact person'}];
            const typeName1='Please ensure that your description is clear as it will greatly enhances your chances of being chosen as an agent. For example: "I am a senior practitioner in the photovoltaic industry. In ** (your country), we have a demand for ** MW Utility-Scale Power Plants, and we are highly interested in establishing a partnership with TW(Tongwei) Solar."';
            const typeName2='Please ensure that your description is clear as it will greatly enhances your chances of being chosen as an agent. For example: "** (your company) is a company specializing in the photovoltaic industry. In ** (your country), we have a demand for ** MW Utility-Scale Power Plants, and we are highly interested in establishing a partnership with TW(Tongwei) Solar."';
            this.advehder=this.typeName=='Individual'?typeName1:typeName2
        }
    },
    mounted() {

    },
    watch: {},
    computed: {},
    methods: {
        handleSubmit(e) {

            e.preventDefault();
            this.$refs.ruleForm.validate(valid => {
                if (valid) {

                    this.handleRegister();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleRegister(data) {
            console.log('执行')
            this.loading = true
            registerApi({...this.form,characteristic:this.typeName=='Individual'?1:2,phone:this.form.phone?this.phonebefore+this.form.phone:""}).then((data) => {
                this.$refs.ruleForm.resetFields();
                this.form = this.$options.data().form
                this.$message.info(data.message || '注册成功!');
                this.login()
                this.loading = false;
            }).catch((err) => {
                console.log(err,'err')
                const suberr=err.subCode?'overseas.subCode.'+err.subCode:'overseas.subCode.500-1'
                this.$message.error(this.$t(suberr));
                //this.$message.error(err);
                this.loading = false;
            })
        },
        login() {
            this.$router.push({
                path: "/registered"
            });
            // this.$confirm({
            //     title: '注册成功,是否前往登录?',
            //     okText: '确定',
            //     onOk: () => {
            //         this.$router.push({
            //             path: "/registered"
            //         });
            //     },
            //     cancelText: '取消',
            //     onCancel() {
            //         console.log('Cancel');
            //     },
            // });
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
        handelRegistered(type) {
            this.$router.push({
                path: '/registered',
                query: {
                    register: type
                }
            })
        },
        changeCountry(id){
            const curritm=this.countrys.filter((item)=>{
                return item.code==this.form.area
            })
            this.phonebefore=curritm[0]?curritm[0].phoneAreaCode+'-':''
        }
    },

};
</script>

<style lang="less" scoped>
.wrapper {
    min-height: 750px;
    text-align: left;
    background-color: rgb(247, 247, 247);
}
.ant-select-selection__placeholder{
    display: block;
}


.max-width {
    max-width: 75.5%;
    margin: auto;
}

.mian {
    width: 100%;
    border: 1px solid blue;
}

.htitle {
    font-size: 18px;
    font-weight: 600;
}

.headerwaper {
    padding: 30px 0px;

}

.formWaper {
    background-color: #fff;
    min-height: 300px;
    padding: 20px;

    .formtype {
        text-align: center;

        .jointitle {
            color: #000;
            font-weight: bold;
            font-size: 20px;
            margin-bottom: 0px;
        }

        .lin {
            border-top: 4px solid #e6212a;
            margin: 4px 0px;
            height: 10px;
            width: 70px;
            display: inline-block;
        }

    }

    .formdesc {
        text-align: center;
        color: #262626;
        font-weight: bold;
        font-size: 14px;
    }

    .mianfrom {
        width: 72%;
        margin: 0 auto;
        margin-top: 30px;
    }

    @media screen and (max-width: 1650px) {
    /* 当屏幕小于或等于 600px 时应用样式 */

        .mianfrom {
            width: 85%;
            margin: 0 auto;
            margin-top: 30px;
        }
    }
    @media screen and (max-width: 1550px) {
    /* 当屏幕小于或等于 600px 时应用样式 */

      .max-width {
          max-width: 85.5%;
          margin: auto;
      }
    }
    /*当屏幕尺寸大于960px且小于1200px时，应用下面的CSS样式*/
    @media screen and (min-width: 1300px) and (max-width:1550px) {
       .max-width{
                width: 90% ;
                margin: auto;
        }
     }
    /* 当屏幕小于或等于 1300px 时应用样式 */
    @media screen and (max-width: 1300px) {
    /* 当屏幕小于或等于 600px 时应用样式 */
        .max-width{
                width: 95.5% !important;
                max-width: 95.5% !important;
                margin: auto;
        }
    }
    @media screen and (max-width: 1300px) {
    /* 当屏幕小于或等于 600px 时应用样式 */
        .max-width{
                width: 95.5% !important;
                max-width: 95.5% !important;
                margin: auto;
        }
        .mianfrom {
            width: 95%;
            margin: 0 auto;
            margin-top: 30px;
        }
    }
    .buitem {
        text-align: center;
    }

    .joinButton {
        border: none;
        background-color: #e6212a;
        color: #fff;
        text-align: center;
        height: 52px;
        line-height: 40px;
        min-width: 128px;
        cursor: pointer;
        font-size: 18px;
    }
}
</style>
